<template>
  <div style="width: 100%;padding: 10px">
    <el-card class="box-card">
      <div>
        <div style="display: flex;align-items: center;justify-content: space-between">
          <div class="details_Header">
            <div class="deleted_Line"></div>
            <span class="details_HeaderTitle">退款信息</span>
          </div>
          <div style="display: flex">
            <el-button type="primary" v-if="form.status==0" @click="confirmClick" v-permission="['askfor.confirm']" >同意退款</el-button>
            <!-- <el-button type="primary" v-show="form.status == 2" @click="logisticsClick" v-permission="['askfor.query']">查看物流</el-button> -->
            <!--<el-button type="primary" v-if="form.status==1" @click="shippingClick" v-permission="['askfor.shipping']">退货录入</el-button>-->
            <!-- <el-button type="primary" v-if="form.status==1||form.status==2" @click="receivedClick" v-permission="['askfor.received']">退货入库</el-button> -->
            <el-button type="primary" v-if="form.status==1 ||form.status==2" @click="receivedClick" v-permission="['askfor.received']">确认退货</el-button>
            <!--<el-button type="primary" v-if="form.status==1 ||form.status==2" @click="shippingClick" v-permission="['askfor.received']">生成退货单</el-button>-->
            <el-button type="primary" v-if="form.status==3" @click="refundsClick" v-permission="['askfor.refund']">确认退款</el-button>
            <!-- <el-button type="primary" @click="cancelAskfor"  v-if="form.status==0||form.status==1||form.status==2" v-permission="['askfor.cancel']">拒绝退款</el-button> -->
            <el-button type="primary" @click="cancelAskfor"  v-if="form.status==0||form.status==1 ||form.status==2||form.status==3" v-permission="['askfor.cancel']">拒绝退款</el-button>
            <el-dropdown style="margin-left: 10px" split-button type="warn" v-show="form.status==4  "
              v-permission="['order.print']" @click="printClick" @command="handleCommand">
              打印
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="printSetupClick">模版</el-dropdown-item>
                  <!-- <el-dropdown-item command="exportViewClick">导出</el-dropdown-item> -->
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
        <div class="deleted_OrderHeader" style="border-left: none;">
          <el-row :gutter="24">
            <el-col :span="8">
              <span class="deleted_Row_Headings">退款单号：</span>
              <span class="deleted_OrderTitle">{{form.sn}}</span>
            </el-col>
             <el-col :span="8">
              <span class="deleted_Row_Headings">销售订单：</span>
              <span class="deleted_OrderTitle">{{form.orderSn}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">退货状态：</span>
              <span class="deleted_OrderTitle" style="color: rgb(64, 158, 255)">{{form.statusDescr}}</span>
            </el-col>
          </el-row>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">退款日期：</span>
              <span class="deleted_OrderTitle">{{form.createDate | dateFormatter}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">开票类型：</span>
              <span class="deleted_OrderTitle">{{form.taxType | watchTaxType}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">所属部门：</span>
              <span class="deleted_OrderTitle">{{officeName}}</span>
            </el-col>

          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">订货方式：</span>
              <span class="deleted_OrderTitle">{{form.orderMethod | watchOrderMethod}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">配送方式：</span>
              <span class="deleted_OrderTitle">{{form.shippingMethod | watchShippingMethod}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">销售人员：</span>
              <span class="deleted_OrderTitle">{{operatorName}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">买家留言：</span>
              <span class="deleted_OrderTitle">{{form.memo}}</span>
            </el-col>
          </el-row>
        </div>
        <div class="details_PayHeader">
          <div class="deleted_Line"></div>
          <span class="details_HeaderTitle">买家信息</span>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">客户名称：</span>
                <span class="deleted_OrderName">{{form.consignee}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="24">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">收货信息：</span>
                <div>
                  <span class="deleted_OrderName">{{form.consignee}} {{form.phone}}</span>
                  <span class="deleted_OrderName" style="margin-top: 5px; width: 600px;">{{form.address}}</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="product_header_name">
          <div class="deleted_Line"></div>
          <span style="margin: 10px 5px;">商品明细</span>
        </div>
        <!--商品规格-->
        <el-table
          :data="form.itemList"
          border
          show-summary
          stripe
          style="width: 100%">
          <el-table-column
            label="排序"
            type="index"
            width="50"
            fixed
          >
          </el-table-column>
          <el-table-column
            label="缩略图"
            width="80">
            <template slot-scope="{row}">
              <img :src="row.thumbnail" style="width: 100%;"/>
            </template>
          </el-table-column>
          <el-table-column
            label="商品名">
            <template slot-scope="{row}">
              <span>{{row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="规格"
            align="center"
          >
            <template slot-scope="{row}">
              <span>{{row.spec}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="货号/条码"
            width="130"
          >
            <template slot-scope="{row}">
              <span>{{row.sn}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="物流单号"
            width="130"
            prop="trackingNo"
          >
          </el-table-column>
          <el-table-column
            label="单位"
            width="50"
            align="center"
          >
            <template slot-scope="{row}">
              <span>{{row.unit}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="退货数量"
            prop="quantity"
            align="right"
            width="50">
          </el-table-column>
          <el-table-column
            label="单价"
            align="right"
            width="70">
            <template slot-scope="{row}">
              <span>{{row.price}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="退款金额"
            width="80"
            align="right"
            prop="amount"
          >
          </el-table-column>
          <el-table-column
            label="优惠"
            width="70"
            align="right"
            prop="discount"
          >
          </el-table-column>
          <el-table-column
            label="实退"
            width="70"
            align="right"
            prop="subTotal"
            fixed="right"
          >
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="center" width="80">
            <template slot-scope="scope">
              <el-link type="primary" @click="logisticDetail(scope.row.trackingNo)">{{scope.row.trackingNo? '查看物流': ''}}</el-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- <div
          style="background-color: #EBEEF5;width: 100%;border-left: 1px solid #DCDFE6;border-right: 1px solid #DCDFE6;border-bottom: 1px solid #DCDFE6;display: flex;justify-content: space-between;padding: 10px;">
          <div style="display: flex;flex-direction: column">
            <div style="display:flex;align-items: center;justify-content: space-between;margin-bottom: 10px">
              <div style="display: flex;margin-right: 20px;align-items: center">
                <span style="font-size: 16px;color: #606266">运费：</span>
                <div style="width: 100px">
                  <el-input v-model="form.freight" disabled/>
                </div>
              </div>
              <div style="display: flex;align-items: center">
                <span style="font-size: 16px;color: #606266">购物券支付：</span>
                <div style="width: 100px">
                  <el-input v-model="form.pointDiscount" disabled/>
                </div>
              </div>
            </div>
            <div style="display: flex;align-items: center;justify-content: space-between">
              <div style="display: flex;margin-right: 20px;align-items: center">
                <span style="font-size: 16px;color: #606266">抹零：</span>
                <div style="width: 100px">
                  <el-input v-model="form.offsetAmount " disabled/>
                </div>
              </div>
              <div style="display: flex;align-items: center">
                <span style="font-size: 16px;color: #606266">余额卡支付：</span>
                <div style="width: 100px">
                  <el-input v-model="form.cardDiscount" disabled/>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div style="margin-bottom: 10px">
              <span style="font-size: 16px;color: #606266">应收：{{form.amountPayable}}</span>
            </div>
            <div style="margin-bottom: 10px">
              <span style="font-size: 16px;color: #606266">应收：{{form.amountPaid}}</span>
            </div>
          </div>
        </div> -->
        <div class="product_header_name">
          <div class="deleted_Line"></div>
          <span style="margin: 10px 5px;">退款详情</span>
        </div>
        <div v-for="(item,index) in refunds" v-bind:key="index">
          <div class="deleted_OrderHeader">
            <el-row :gutter="24">
              <el-col :span="1">
                <span style="padding-left: 20px;">├</span>
              </el-col>

              <el-col :span="4">
                <span>{{item.createDate | datetimeFormatter}}</span>
              </el-col>
              <el-col :span="4">
                <span>付款方式 :</span>
                <span>{{item.paymentPluginName}}</span>
              </el-col>
              <el-col :span="3">
                <span>实退金额 :</span>
                <span>{{item.amount}}</span>
              </el-col>
              <el-col :span="3">
                <span  style="color: rgb(64, 158, 255)">{{item.status | watchPayment}}</span>
              </el-col>
              <el-col :span="9">
                <span>备注 : </span>
                <span>{{item.memo}}</span>
              </el-col>
            </el-row>
          </div>
        </div>

        <div class="product_header_name">
          <div class="deleted_Line"></div>
          <span style="margin: 10px 5px;">退款日志</span>
        </div>
        <div v-for="(item,index) in askforLog" v-bind:key="index">
          <div class="deleted_OrderHeader">
            <el-row :gutter="24">
              <el-col :span="1">
                <span style="padding-left: 20px;">├</span>
              </el-col>
              <el-col :span="4">
                <span>{{item.createDate | datetimeFormatter}}</span>
              </el-col>
              <el-col :span="19">
                <span>{{item.content}}</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-card>

     <el-dialog title="物流信息" width="60%" :visible.sync="logisticsVisible">
      <div class="el-dialog-div">
        <el-table :data="logisticsData" border>
          <el-table-column label="物流单号" width="140">
            <template slot-scope="scope">{{scope.row.trackingNo}}</template>
          </el-table-column>
          <el-table-column label="商品图片" width="80">
            <template slot-scope="scope">
              <img :src="scope.row.thumbnail" style="width: 100%; height: 100%;">
            </template>
          </el-table-column>
          <el-table-column label="商品名称">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top">
                <span>{{ scope.row.name }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="商品规格">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.spec" placement="top">
                <span>{{ scope.row.spec }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="center" width="80">
            <template slot-scope="scope">
              <el-link type="primary" @click="logisticDetail(scope.row.trackingNo)">{{scope.row.trackingNo? '查看物流': ''}}</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <el-dialog title="快递动态" width="60%" :visible.sync="logisticsDetailVisible">
      <div class="el-dialog-div">
        <el-table :data="logisticsDetailData">
          <el-table-column prop="ftime" label="时间" width="170"></el-table-column>
          <el-table-column label="快递动态">
            <template slot-scope="scope">
              <span :style="{'color': scope.$index===0? '#409EFF': ''}">{{scope.row.context}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
        <orderPrintTwo @isTeach="isTeach" v-if="isPrintShow==true" :shopName="shopName" :form="form"
      printName="askfor_10200_0" :sendForm="sendForm" :officeName="officeName" ref="orderPrintTwo"></orderPrintTwo>
  </div>
</template>

<script>
  import orderPrintTwo from '@/components/OrderPrint/orderPrintTwo'
  import {EventBus} from '@/api/eventBus'
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import { confirm, find, received, update,cancel,refunds} from '../../api/askfor'
  import { shipping, trackingNo_query, delivery_query } from '@/api/shipping'

  export default {
    directives: {elDragDialog,permission},
    name: 'askfor-view',
    data(){
      return{
        shopName:'',
        isPrintShow:false,
        sendForm:{},
        returnclicked:false,
        returngoods:false,
        id:'',
        returnsType: false,
        form:{},
        askforLog: [],
        refunds: [],
        operatorName: '',
        officeName: '',
        pageNum: 1,
        pageSize: 20,
        logisticsData: [], //物流信息
        logisticsDetailData: [], //物流详情
        logisticsVisible: false,
        logisticsDetailVisible: false,
      }
    },
    watch:{ // 路由地址不变的情况下,如果id变化则重新获取数据
      $route (newVal, oldVal) {
          console.log(newVal);
        if (newVal.name=='askfor-view' && newVal.query.id!=this.id) {
          this.findAskfor()
        }
      }
    },
    methods:{
        isTeach(data) {
        this.isNoInstall = data
      },
     handleCommand(command) {
        if (command == 'printSetupClick') {
          this.printSetupClick()
        }
      },
      printClick() {
        this.isPrintShow = true
        setTimeout(() => {
          this.$refs.orderPrintTwo.printPdf()
        }, 1000)
      },
      printSetupClick() {
        this.isPrintShow = true
        setTimeout(() => {
          this.$refs.orderPrintTwo.printSetUp()
        }, 1000)
      },

      logisticsClick () { // 查看物流
        let params = new URLSearchParams()
        params.append('pageNum', this.pageNum)
        params.append('pageSize', this.pageSize)
        params.append('orderId', this.form.orderId)
        trackingNo_query(params).then(res => {
          console.log(res)
          this.logisticsData = res.data.data
          this.logisticsVisible = true
        }).catch(err => {
          console.log(err)
        })
      },
      logisticDetail (trackingNo) {
        this.logisticsDetailData = []
        delivery_query({trackingNo}).then(res => {
          console.log(res)
          this.logisticsDetailData = res.data.data
          this.logisticsVisible = false
          this.logisticsDetailVisible = true
        }).catch(err => {
          console.log(err)
        })
      },
      receivedClick(){
        this.$confirm('确认退货?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          received(this.id).then(response=>{
            this.findAskfor()
            EventBus.$emit('askfor-edit', response.data)
          })
        })

      },
      refundsClick(){
        this.$confirm('确认退款?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          refunds(this.id).then(response=>{
            this.findAskfor()
            EventBus.$emit('askfor-edit', response.data)
          })
        })

      },
      confirmClick(){
        this.$confirm('同意退款?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          confirm(this.id).then(response=>{
            this.findAskfor()

            EventBus.$emit('askfor-edit', response.data)
          })
        })

      },
      returnsClose(){
        this.returnsType=false
      },
      cancelAskfor(){
        this.$confirm('拒绝退款?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          cancel(this.id).then(response=>{
            this.findAskfor()

            EventBus.$emit('askfor-edit', response.data)
          })
        })
        // this.form.status=1
        // update(this.form).then(response=>{
        //
        // })
      },

      findAskfor(){
        this.id = this.$route.query.id;
        find(this.id).then(response=>{
          console.log(response,'详情');
          this.form=response.data.askfor
          this.sendForm = this.form
          this.askforLog = response.data.askforLog
          this.refunds = response.data.refunds
          console.log(this.refunds,'this.refunds')
          this.operatorName = response.data.operatorName
          this.officeName = response.data.officeName
        })
      },

    },
    created() {
      this.findAskfor()
    },
    components:{orderPrintTwo},
    filters:{
      watchPayment(val) {
        if (val == 0) {
          return '等待退款'
        } else if (val == 1) {
          return '提交退款'
        } else if (val == 2) {
          return '退款成功'
        } else if (val == 3) {
          return '退款失败'
        } else if (val == 4) {
          return '退款取消'
        }
      },
      watchTaxType (val) {
        if (val == 0) {
          return '不开票'
        } else if (val == 1) {
          return '增票'
        } else if (val == 2) {
          return '普票'
        }
      },
      watchOrderMethod (val) {
        if (val == 0) {
          return '线上订单'
        } else if (val == 1) {
          return '人工报单'
        } else if (val == 2) {
          return '门店销售'
        }
      },
      watchShippingMethod(val){
        if (val == 0) {
          return '普通快递'
        } else if (val == 1) {
          return '到店提货'
        } else if (val == 2) {
          return '同城配送'
        }
      },
    }
  }
</script>

<style scoped>
  .box-card {
    width: 100%;
    box-sizing: border-box;
  }

  .details_Header {
    display: flex;
    align-items: center;
  }

  .deleted_Line {
    width: 2px;
    height: 12px;
    background-color: #409EFF;
  }

  .details_HeaderTitle {
    font-weight: 600;
    margin-left: 5px;
    display: block;
    width: 100px;
  }

  .deleted_OrderHeader {
    padding-top: 5px;
    padding-bottom: 10px;
    margin: 10px 0;
    border-left: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
  }

  .deleted_OrderTitle {
  }

  .deleted_OrderContent {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .details_PayHeader {
    display: flex;
    align-items: center;
    margin-top: 40px;
  }

  .details_Buyers {
    display: flex;
    align-items: center;
  }

  .deleted_Row_Headings {
    color: #666666;
  }

  .deleted_OrderName {
    color: #409EFF;
    margin-left: 5px;
    width: 250px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .product_header_name {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    margin-top: 20px;
    font-weight: 600;
  }
  .el-dialog-div {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
</style>
